<template>
  <div>
    <el-dialog :title="form.id ? '编辑' : '添加'" :visible.sync="buffn.off">
      {{ form }}
      <el-form :model="form">
        <el-form-item
          label="顶级菜单"
          :label-width="formLabelWidth"
          :disabled="form.id ? true : false"
        >
          <el-select
            v-model="form.pid"
            placeholder="请选择活动区域"
            @change="change"
          >
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option
              v-for="item in good"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="菜单图标"
          :label-width="formLabelWidth"
          v-show="form.pid == 0"
        >
          <iconPicker v-model="form.icon"></iconPicker>
        </el-form-item>

        <el-form-item
          label="菜单地址"
          :label-width="formLabelWidth"
          v-show="form.pid != 0"
        >
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="菜单名称"
          :label-width="formLabelWidth"
     
        >
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio v-model="form.type" :label="1" disabled>目录</el-radio>
          <el-radio v-model="form.type" :label="2" disabled>菜单</el-radio>
        </el-form-item>
        <el-form-item label="菜单状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="buffn.off = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["buffn", "good"],
  data() {
    return {
      form: {
        pid: 0, //顶级菜单id
        title: "", //菜单名称
        icon: "", //菜单图标
        type: 1, //菜单类型 1：目录  2：菜单
        url: "", //菜单路由
        status: 1, //1 启用  2禁用
      },
      flag: false, //ture是添加，false是编辑
      formLabelWidth: "120px",
    };
  },

  created() {
    this.ok();
  },
  methods: {
    ok() {
      console.log(this.form);
      if (this.form.id!=0) {
        this.$api.reqAdd(this.form).then((res) => {
          this.buffn.off = false;
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.form = {
            pid: 0, //顶级菜单id
            title: "", //菜单名称
            icon: "", //菜单图标
            type: 1, //菜单类型 1：目录  2：菜单
            url: "", //菜单路由
            status: 1, //1 启用  2禁用
          };
        });
      } else {
        this.$api.reqEdit(this.form).then((res) => {
          this.buffn.off = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.form = {
            pid: 0, //顶级菜单id
            title: "", //菜单名称
            icon: "", //菜单图标
            type: 1, //菜单类型 1：目录  2：菜单
            url: "", //菜单路由
            status: 1, //1 启用  2禁用
          };
        });
      }
    },
    change(pid) {
      if (pid == 0) {
        this.form.type = 1;
        this.form.url = "";
      } else {
        this.form.type = 2;
        this.form.url = "";
      }
    },
  },
  created() {
    console.log(this.good);
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
</style>
